<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
	<div id='app'>
		<counter></counter>
		<hr>
		<counter></counter>
		<hr>
		<counter></counter>
	</div>


	<template id="tmp1">
		<div>
			<input type="button" value="add" @click="increament">
			<h3> {{ count }} </h3>
		</div>
	</template>
	<script>
		var dataObj = { count: 0}
		Vue.component("counter", {
			template: "#tmp1",
			data: function() {
				return { count: 0};
			},
			methods: {
				increament() {
					this.count ++;
				}
			}
		});

		var vm = new Vue({
			el: '#app',
			data: {},
			methods: {}
		})
	</script>
</body>
</html>